<template>
    <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
        <a-form>
            <a-form-item
                    label="ID"
                    :labelCol="{span: 7}"
                    :wrapperCol="{span: 10}"
            >
                <a-input v-model="form.id" disabled/>
            </a-form-item>
                        <a-form-item
                    label="模板名"
                    :labelCol="{span: 7}"
                    :wrapperCol="{span: 10}"
                    :validate-status="validate.name.pass? '':'error'"
                    :help="validate.name.pass? '':validate.name.help"
            >
                <a-input v-model="form.name"/>
            </a-form-item>
            <a-form-item
                    label="模板描述"
                    :labelCol="{span: 7}"
                    :wrapperCol="{span: 10}"
                    :validate-status="validate.info.pass? '':'error'"
                    :help="validate.info.pass? '':validate.info.help"
            >
                <a-textarea rows="4" v-model="form.info"/>
            </a-form-item>
            <a-form-item
                    label="模板地址"
                    :labelCol="{span: 7}"
                    :wrapperCol="{span: 10}"
                    :validate-status="validate.url.pass? '':'error'"
                    :help="validate.url.pass? '':validate.url.help"
            >
                <a-input v-model="form.url"/>
            </a-form-item>

            <a-form-item
                    label="创建时间"
                    :labelCol="{span: 7}"
                    :wrapperCol="{span: 10}"
            >
                <a-input disabled v-model="form.createTime"/>
            </a-form-item>
            <a-form-item
                    label="修改时间"
                    :labelCol="{span: 7}"
                    :wrapperCol="{span: 10}"
            >
                <a-input disabled v-model="form.updateTime"/>
            </a-form-item>
            <a-form-item style="margin-top: 24px" :wrapperCol="{span: 10, offset: 7}">
                <a-button type="primary" @click="handleSubmit">提交</a-button>
            </a-form-item>

        </a-form>
    </a-card>
</template>

<script>
    import {
        templateService,
    } from "@/services";
    import validate from '@/utils/validate'
    import verifyConfig from './verifyConfig';

    export default {
        name: 'TemplateForm',
        data () {
            return {
                form: {
                    id:'',
                    name:'',
                    info:'',
                    url:'',
                    updateTime:'',
                    createTime:'',
                },
                validate:{
                    id: {},
                    name: {
                        pass: true,
                    },
                    info: {
                        pass: true,
                    },
                    url: {
                        pass: true,
                    },
                    updateTime: {},
                    createTime: {},
                },

                /*其他数据*/

            }
        },
        async created() {
            await this.loadOtherData();
            if (this.$route.params.id) {
                this.form.id = this.$route.params.id;
                await this.loadData();
            }


        },
        methods: {
            // 加载数据
            async loadData() {
                const result = await templateService.getById({id:this.form.id});
                if (result.code == 200) {
                    this.form = result.data;
                }
            },
            // 加载其他数据
            async loadOtherData() {
            },

            onChange(date, dateString) {
                console.log(date, dateString);
            },
            verify() {
                const result = validate.verifying(this.form,verifyConfig,this.validate);
                return result;
            },

            async handleSubmit() {
                // 校验表单
                if (!this.verify()) {
                    return;
                }

                if (this.$route.params.id) {
                    const result = await templateService.edit(this.form);
                    if (result.code == 201) {
                        this.$message.success('修改成功');
                        this.$router.go(-1);
                    } else {
                        this.$message.error('修改失败' + result.msg);
                    }
                } else {
                    const result = await templateService.save(this.form);
                    if (result.code == 201) {
                        this.$message.success('添加成功');
                        this.$router.go(-1);
                    } else {
                        this.$message.error('添加失败:' + result.msg);
                    }
                }
            }
        }
    }
</script>

<style scoped>

</style>
